<!-- 自我效能评估-->
<template>
	<view>
		<!-- <view class="header">
			<z-nav-bar type="transparentFixed" transparentFixedFontColor="#FFF" :title="formData.title"></z-nav-bar>
			<image src="http://public.jingzhetech.cn/main_banner.png" mode="scaleToFill" style="width: 100%;"></image>
		</view> -->
		<view class="container">
			<view class="main">
				<uni-forms ref="form" :modelValue="formData" :rules="formRules" label-position="top">
					<view>
						<view>
							<uni-title class="title" type="h2" :title="formData.title" align="center" color="#346E48"></uni-title>
						</view>
						<text class="uni-text content">{{formData.content}}</text>
					</view>
					<uni-forms-item v-for="(item, index) in formData.queFormDetailList" :key="item.id" :label="(index + 1) + '、' + item.title" :name="'id_' + item.id"
						:required="item.required == '0' ? true : false"  :rules="item.rules" class="question-item" label-width="100%">
						<view class="form-item" v-if="item.type == 0">
							<uni-data-checkbox mode="list" v-model="formData['id_' + item.id]" :localdata="item.queFormDetailOptionList" class="options-list" />
						</view>
						<view class="form-item" v-if="item.type == 1">
							<uni-data-checkbox mode="button" multiple v-model="formData['id_' + item.id]" :localdata="item.queFormDetailOptionList" class="options-button" />
						</view>
						<view class="form-item" v-if="item.type == 2">
							<uni-easyinput v-model="formData['id_' + item.id]" />
						</view>
						<view class="form-item" v-if="item.type == 3">
							<uni-easyinput  type="textarea" v-model="formData['id_' + item.id]" />
						</view>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit" style="background-color: #346E48;border-radius: 20px;">提交评估</button>
			</view>
		</view>
	</view>
</template>

<script>
import {getQuestionList, submitQuestion} from "@/api/secondVitim/comevaluation/dynamicForm"
	
export default {
	data() {
		return {
			formRules: {
				rules: [{
					required: true,
					errorMessage: '必填项不能为空'
				}]
			},
			formId: null,
			sourceFormData: null,
			formData: null
		};
	},
	methods: {
		// 触发提交表单
		submit() {
			this.$refs.form.validate().then(res=>{
				var submitForm = [];
				for(var obj in res){
					// "options": "在过去一周内你是否出现过吞咽困难症状",//问题描述
					// "optionValue": "1",//选项值
					// "optionText": "	极少",//选项值对应文本
					// "remark": "B",//备注 对应接口7中queFormDetailOptionList->remark
					// "queFormDetailOptionId": 23,//对应接口7中queFormDetailOptionList->id
					// "queFormDetailId": 46//问题id对应接口7中queFormDetailOptionList->formDetailId
					var id = obj.split('_')[1];
					for(var i=0,len=this.sourceFormData.queFormDetailList.length; i<len; i++){
						var item = this.sourceFormData.queFormDetailList[i];
						if(item.id == id){
							var optionValue = null;
							var queFormDetailOptionId = null;
							var queFormDetailId = null;
							var optionValue = null;
							var optionText = null;
							if(item.type == 0) {
								//单选
								var getSectedObj = this.getSectedObj(item, res[obj]);
								optionValue = res[obj];
								optionText = getSectedObj[0].optionText;
								queFormDetailId = getSectedObj[0].formDetailId;
								queFormDetailOptionId = getSectedObj[0].id;
							} else if(item.type == 1) {
								//多选
								var getSectedObj = this.getSectedObj(item, res[obj]);
								optionValue = res[obj].join(',');
								optionText = function(){
									var selectedText = '';
									getSectedObj.forEach(function(e){
										selectedText += e.optionText + ",";
									});
									return selectedText;
								}();
								queFormDetailId = getSectedObj[0].formDetailId;
								queFormDetailOptionId = getSectedObj[0].id;
							} else {
								optionValue = res[obj];
								optionText = res[obj];
								// remark = getSectedObj[0].remark;
								queFormDetailId = id;
								//queFormDetailOptionId = getSectedObj[0].id;
							}
							
							submitForm.push({
								options: item.title,
								optionValue: optionValue,
								optionText: optionText,
								remark: item.remark,
								queFormDetailOptionId: queFormDetailOptionId,
								queFormDetailId: queFormDetailId
							})
							break;
						}
					}
				}
				
				//提交问卷详情
				var params = {
					userId : this.$store.state.user.id,
					formId : this.formId,
					submitFormDetailList: submitForm
				}
				
				submitQuestion(params).then(response => {
				 if(response.code == 200) {
					uni.showToast({
						title: response.msg,
						icon: "success",
						success:function(res){
							//返回上一层
							setTimeout(function(){
								//通知父组件更新状态
								uni.navigateBack();
							}, 2000)
						}
					});
				 } else {
					uni.showToast({
						title: response.msg,
						icon: "error"
					});
				 };
				})
			})
		},
		getSectedObj: function(obj, optionValues){
			var queFormDetailOptionList = obj.queFormDetailOptionList;
			var selectedOptions = [];
			if(optionValues instanceof Array) {
				for(var j=0,jLen=optionValues.length; j<jLen; j++){
					for(var i=0,len=queFormDetailOptionList.length; i<len; i++){
						var item = queFormDetailOptionList[i];
						if(item.optionValue == optionValues[j]) {
							selectedOptions.push(item);
						}
					}
				}
			} else {
				for(var i=0,len=queFormDetailOptionList.length; i<len; i++){
					var item = queFormDetailOptionList[i];
					if(item.optionValue == optionValues) {
						selectedOptions.push(item);
					}
				}
			}
			
			return selectedOptions;
		}
	},
	onLoad(e) {
		getQuestionList(e.formId).then(response => {
			this.formId = e.formId;
			if(response.code == 200) {
				var data = response.data;
				this.sourceFormData = data;//将原表单内容存储至该对象中
				var formData = {};
				formData.title = data.title == null ? '' : data.title,
				formData.formType = data.formType;
				formData.content = data.content == null ? '' : data.content;
				formData.status = data.status;
				var queFormDetailList = [];
				for(var i=0,len=data.queFormDetailList.length; i<len; i++) {
					var item = data.queFormDetailList[i];
					var queFormDetailOptionList = item.queFormDetailOptionList;
					var optionList = [];
					if(queFormDetailOptionList.length > 0) {
						for(var j=0, jLen=queFormDetailOptionList.length; j<jLen; j++){
							var option = queFormDetailOptionList[j];
							optionList.push({
								text: option.optionText,
								value: option.optionValue
							})
						}
					}
					queFormDetailList.push({
						id: item.id,
						formId: item.formId,
						type: item.type,
						title: item.title,
						options: item.options,
						required: item.required,
						queFormDetailOptionList: optionList,//选项键值对
						rules: [{
							required: item.required,
							errorMessage: '必填项不能为空'
						}]
					})
				}
				
				formData.queFormDetailList = queFormDetailList;
				this.formData = formData;
			}
		})
	},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #FFF;
		border-radius: 10px;
		padding: 10px;
		border: 1px solid #979797;
		box-shadow: 0 3px 20px 0 rgba(148,218,200,0.23);
	}
	
	.form-item {
		display: flex;
		align-items: flex-start;
		padding: 8px 0;
	}

	/* 题干整体块，增加分隔与留白 */
	.question-item {
		margin: 14px 0;
		padding: 10px 8px 2px 8px;
		border-bottom: 1px solid #F2F2F2;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* 单选列表型的每项更紧凑且对齐 */
	.options-list {
		width: 100%;
	}

	/* 多选按钮型，增加换行间距 */
	.options-button {
		width: 100%;
	}
	
	.content {
		width: 100%;
		padding: 10px;
		font-size: 14px;
		line-height: 1.8;
		color: #666666;
	}
</style>
